import React from 'react';
import { useAiCorrectorStore } from '@/stores/useAiCorrectorStore';
import { IssueType } from '@/types/aiCorrector';

const ResultsOverview: React.FC = () => {
  const { state } = useAiCorrectorStore();
  const { stats } = state;
  
  // 质量评分颜色
  const getScoreColor = (score: number) => {
    if (score >= 90) return 'text-green-600';
    if (score >= 70) return 'text-yellow-600';
    return 'text-red-600';
  };
  
  // 问题类型标签
  const getIssueTypeLabel = (type: IssueType) => {
    switch (type) {
      case IssueType.TYPO:
        return '错别字';
      case IssueType.SEMANTIC:
        return '语义混乱';
      case IssueType.RISK_LEVEL:
        return '风险等级不合理';
      case IssueType.COMPLIANCE_STATUS:
        return '合规状态不合理';
      default:
        return type;
    }
  };
  
  return (
    <div className="bg-card rounded-lg shadow p-6 mb-6">
      <h2 className="text-xl font-semibold text-foreground mb-4">检测结果概览</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        {/* 检测项目总数 */}
        <div className="bg-muted rounded-lg p-4">
          <div className="text-sm text-muted-foreground mb-1">检测项目总数</div>
          <div className="text-2xl font-semibold text-foreground">{stats.totalItems}</div>
        </div>
        
        {/* 发现问题数 */}
        <div className="bg-muted rounded-lg p-4">
          <div className="text-sm text-muted-foreground mb-1">发现问题数</div>
          <div className="text-2xl font-semibold text-foreground">{stats.totalIssues}</div>
        </div>
        
        {/* 高优先级问题数 */}
        <div className="bg-muted rounded-lg p-4">
          <div className="text-sm text-muted-foreground mb-1">高优先级问题</div>
          <div className="text-2xl font-semibold text-red-600">{stats.highPriorityIssues}</div>
        </div>
        
        {/* 质量评分 */}
        <div className="bg-muted rounded-lg p-4">
          <div className="text-sm text-muted-foreground mb-1">质量评分</div>
          <div className={`text-2xl font-semibold ${getScoreColor(stats.qualityScore)}`}>
            {stats.qualityScore}
          </div>
        </div>
      </div>
      
      {/* 问题类型分布 */}
      <div>
        <h3 className="text-base font-medium text-foreground mb-3">问题类型分布</h3>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          {Object.entries(stats.issuesByType).map(([type, count]) => (
            <div key={type} className="flex items-center">
              <div className="w-3 h-3 rounded-full mr-2" style={{
                backgroundColor: type === IssueType.TYPO ? '#4f46e5' :
                                type === IssueType.SEMANTIC ? '#0891b2' :
                                type === IssueType.RISK_LEVEL ? '#ca8a04' :
                                '#dc2626'
              }}></div>
              <div className="text-sm">
                <span className="text-foreground">{getIssueTypeLabel(type as IssueType)}</span>
                <span className="text-muted-foreground ml-2">{count}</span>
              </div>
            </div>
          ))}
        </div>
        
        {/* 严重程度分布 */}
        <div className="mt-6">
          <h3 className="text-base font-medium text-foreground mb-3">严重程度分布</h3>
          
          <div className="flex items-center gap-6">
            <div className="flex items-center">
              <div className="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
              <div className="text-sm">
                <span className="text-foreground">高</span>
                <span className="text-muted-foreground ml-2">{stats.highPriorityIssues}</span>
              </div>
            </div>
            
            <div className="flex items-center">
              <div className="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
              <div className="text-sm">
                <span className="text-foreground">中</span>
                <span className="text-muted-foreground ml-2">{stats.mediumPriorityIssues}</span>
              </div>
            </div>
            
            <div className="flex items-center">
              <div className="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
              <div className="text-sm">
                <span className="text-foreground">低</span>
                <span className="text-muted-foreground ml-2">{stats.lowPriorityIssues}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      {/* 无问题时的提示 */}
      {stats.totalIssues === 0 && stats.totalItems > 0 && (
        <div className="mt-6 p-4 bg-accent text-accent-foreground rounded-lg">
          <div className="font-medium">恭喜！</div>
          <p className="text-sm mt-1">所有检查项都通过了AI检测，未发现任何问题。</p>
        </div>
      )}
    </div>
  );
};

export default ResultsOverview;
